<!--评价我的-->
<template>
     <div id="myEvaluate">
              <!--后退-->
            <img class="back" style=""src="../../../assets/homepage/back.png" alt="" onclick="history.go(-1)">
         <div class="meEvalMeHeader">
            <div class="content">
                <p><img :src="currentUserCake.headPortrait" alt=""></p>
                <!--<p>{{currentUserCake.nickName}}
                 <img v-if="currentUserCake.sex==1" src="../../../assets/homepage/male.png" alt="">
                <img v-if="currentUserCake.sex==2" src="../../../assets/homepage/women.png" alt="">
                </p>-->
            </div>
            <div class="data">
                <p>总评论数：{{currentUserCake.totalEvaluateNumber}}</p>
                <p>信用度：{{currentUserCake.creditDegree}}</p>
            </div>
            <div class = 'chart'>
                <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
                <chart-pie :data = 'chartData' :config = 'chartConfig'></chart-pie>
            </div>
         </div>
         <!--评价我的 我评价的-->
        <mt-navbar v-model="selected">
            <mt-tab-item id="1">评论我的</mt-tab-item>
            <mt-tab-item id="2">我评论的</mt-tab-item>
        </mt-navbar>
        <mt-tab-container v-model="selected">
              <mt-tab-container-item v-infinite-scroll="loadMore"
                                     infinite-scroll-disabled="moreLoading" infinite-scroll-distance="0"
                                     infinite-scroll-immediate-check="false" id="1">
                    <!--评论具体内容-->
                   <div class="evalContent"  v-for="item in CommentToMeData">
                        <p>Form.</p>
                        <img  class="userImg" :src="item.userModel.headPortrait" alt="">
                        <div>
                            <section class="evalConName">
                                <p >{{item.userModel.nickName}}</p>
                                <div class="evalConStar">
                                    <img v-for="item in total" src="../../../assets/tabber/starHav.png" alt="">
                                    <img v-for="item in untotal" style="width:11px;height:11px;" src="../../../assets/tabber/unstarHav.png" alt="">
                                </div>
                            </section>
                            <section class="evalConSec">
                                <p>{{item.evaluationContent}}</p>
                            </section>
                            <section class="evalConTime">
                                <p>{{smallType(item.smallType)}}</p>
                                <span style="color:#8a8a8a;font-size:0.6rem;">{{turnTime(item.createTime)}}</span>
                            </section>
                        </div>
                   </div>
              </mt-tab-container-item>
              <mt-tab-container-item v-infinite-scroll="loadMore2"
                                     infinite-scroll-disabled="moreLoading2" infinite-scroll-distance="0"
                                     infinite-scroll-immediate-check="false" id="2">
                    <!--评论具体内容-->
                   <div class="evalContent"  v-for="item in CommitToOtherData">
                        <p>To.</p>
                        <img  class="userImg" :src="item.userModel.headPortrait" alt="">
                        <div>
                            <section class="evalConName">
                                <p >{{item.userModel.nickName}}</p>
                                <div class="evalConStar">
                                    <img v-for="item in total" src="../../../assets/tabber/starHav.png" alt="">
                                    <img v-for="item in untotal" style="width:11px;height:11px;" src="../../../assets/tabber/unstarHav.png" alt="">
                                </div>
                            </section>
                            <section class="evalConSec">
                                <p>{{item.evaluationContent}}</p>
                            </section>
                            <section class="evalConTime">
                                <p>{{smallType(item.smallType)}}</p>
                                <span style="color:#8a8a8a;font-size:0.6rem;">{{turnTime(item.createTime)}}</span>
                            </section>
                        </div>
                   </div>
              </mt-tab-container-item>
         </mt-tab-container>

     </div>
</template>
<script>
import { ChartPie } from 'vue-d2b'
import smallType from '../../../server/smallType.js'
import turnTime from '../../../server/dataTime.js'
     export default {
         data(){
             return {
                total:undefined,
                untotal:undefined,
                star:undefined,
                unstar:undefined,
                currentUserId:undefined,
                currentUserCake:'',
                turnTime:turnTime,
                smallType:smallType,
                forms:{
                     pageSize:6,
                     pageNumber:1
                },
               forms2:{
                 pageSize:6,
                 pageNumber:1
               },
               moreLoading: false,
               moreLoading2: false,
               loading: false,
               loading2: false,
                CommentToMeData:[],
                CommitToOtherData:[],
                selected:'1',
                chartData: [],
                chartConfig (chart) {
                    chart.donutRatio(0.5)
                },
             }
         },
          created(){
            this.getCurrentMess()

            this.getCommentToOther()
            this.getCommentToMe()
            setTimeout(()=>{
               this.checkCakeMess()
            },1000)

         },
         mounted(){
            // console.log(document.getElementsByTagName('path'))
         },
         components:{
            'ChartPie':ChartPie
        },
        methods:{
            deleteWelEva(id){
                this.$api.deleteWelEva(id).then((res)=>{
                     if(res.code=='000000'){
                         this.getCommentToMe()
                     }
                 })
            },
          loadMore(){
            this.forms.pageNumber++
            this.getCommentToMe()
          },
          loadMore2(){
            this.forms2.pageNumber++
            this.getCommentToOther()
          },
            // 获取当前登录人信息
            getCurrentMess(){
                 this.$api.currUser().then((res)=>{
                     if(res.code=='000000'){
                         console.log(res.data.id)
                         this.currentUserId = res.data.id
                     }
                 })
            },
            // 查询一个人员饼状图信息
            checkCakeMess(){
                  this.$api.checkCakeMess(this.currentUserId).then((res)=>{
                     if(res.code=='000000'){
                        //  this.chartData
                        res.data.userTagModels.forEach((item)=>{
                              const obj = {};
                              obj.label = item.tagName;
                              obj.value = item.number;
                              this.chartData.push(obj);
                        })
                        this.currentUserCake = res.data;
                        this.total = this.currentUserCake.totalStar;
                        this.untotal = 5-Number(this.total)
                     }
                 })
            },
            // 获取我对别人的评论信息
            getCommentToOther(){
                 this.$api.ToComment(this.forms2).then((res)=>{
                     if(res.code=='000000'){
                       if (res.data.totalPage === this.forms2.pageNumber){
                         this.moreLoading2 = true
                       } else {
                         this.moreLoading2 = false
                       }
                       res.data.list.forEach(item => {
                         this.CommitToOtherData.push(item)
                         console.log(this.CommitToOtherData)
                         this.star=item.userModel.totalStar
                         this.unstar = 5-Number(this.star)
                       })

                     }
                 })
             },
             // 获取别人评论我的信息
             getCommentToMe(){
                 this.$api.getCommentToMe(this.forms).then((res)=>{
                     if(res.code=='000000'){
                       if (res.data.totalPage === this.forms.pageNumber){
                         this.moreLoading = true
                       } else {
                         this.moreLoading = false
                       }
                       res.data.list.forEach(item => {
                         this.CommentToMeData.push(item)
                       })

                     }
                 })
             },
        }
     }
</script>
<style lang="">
#myEvaluate .meEvalMeHeader  .chart{
    width: 100%;
    height:28vh;
}
#myEvaluate .meEvalMeHeader  .d2b-chart{
    top:1.5rem !important;
}

#myEvaluate .d2b-chart-frame{
    width:100%;
}
#myEvaluate .d2b-legend-frame{
    bottom:-1vh!important;
}
#myEvaluate .d2b-chart-frame .d2b-breadcrumbs-frame:not(.d2b-vertical).d2b-legend-frame, .d2b-chart-frame .d2b-legend-frame:not(.d2b-vertical).d2b-legend-frame{
    height: 1rem!important;
}
#myEvaluate .mint-tab-container {
  /* overflow: hidden; */
  position: inherit;
}
#myEvaluate .mint-tab-container-item{
  position: absolute;
  top: 35vh;
  bottom: 0;
  left: 0;
  right: 0;
  height:65vh;
  overflow-y: auto;
  padding-top:1rem;

}
#myEvaluate .mint-tab-item-label img{
    width:1.25rem;
    height:1.25rem;
    margin-bottom:0.25rem;
}
#myEvaluate .mint-navbar .mint-tab-item {
    padding:0.5rem 0;
    font-size: 0.75rem;
}

#myEvaluate .mint-tab-item-label{
    font-size:0.8rem;
    line-height:4vh;
    height:4vh;
    color:#8a8a8a;
}
#myEvaluate .mint-navbar{
    letter-spacing:0.05rem;
}
#myEvaluate .mint-navbar .mint-tab-item.is-selected{
    border:none;
    color:white;
}
#myEvaluate .is-selected .mint-tab-item-label{
    color:#6ab273;
}
#myEvaluate .mint-tab-item:nth-child(1) .mint-tab-item-label::before{
    content:url(../../../assets/task/undel.png);
    position: relative;
    top:0.3rem;
    right:0.3rem;
}
#myEvaluate .mint-tab-item:nth-child(2) .mint-tab-item-label::before{
    content:url(../../../assets/task/uncomment.png);
    position: relative;
    top:0.3rem;
    right:0.3rem;
}
#myEvaluate .mint-tab-item:nth-child(1).is-selected .mint-tab-item-label::before{
    content:url(../../../assets/task/del.png);
    position: relative;
    top:0.3rem;
    right:0.3rem;
}
#myEvaluate .mint-tab-item:nth-child(2).is-selected .mint-tab-item-label::before{
    content:url(../../../assets/task/comment.png);
    position: relative;
    top:0.3rem;
    right:0.3rem;
}
#myEvaluate .d2b-legend-content{
    color:#e2e2e2;
}
#myEvaluate .meEvalMeHeader{
    height:30vh;
    width:100%;
    background-size:100% 100%;
    background-image:url('../../../assets/me/meEvMeBack.png')
}
#myEvaluate .back{
    position:fixed;
    height:1rem;
    width:0.6rem;
    top:1.25rem;
    left:1.25rem;
    z-index:2;
}
#myEvaluate .meEvalMeHeader .content{
    position:absolute;
    z-index:111;
    top:11%;
    left:43%;

}
#myEvaluate .meEvalMeHeader .data{
    position:absolute;
    z-index:111;
    top:3%;
    left:70%;
    font-size:0.8rem;
    line-height:1.5rem;
    color:#fff;
}
#myEvaluate .meEvalMeHeader .content > p:nth-child(1) >img{
    border-radius:50%;
    height:3.5rem;
    width:3.5rem;
    border:0.2rem solid #29a193;
}
#myEvaluate .meEvalMeHeader .content > p:nth-child(2){
    text-align:center;
    font-size:0.6rem;
}
#myEvaluate .meEvalMeHeader .content > p:nth-child(2) >img{
     height:1rem;
    width:1rem;
    margin-left:0.1rem;
}
#myEvaluate .meEvalMeHeader .comment{
    height:8rem;
    display:flex;
    background-size:100% 100%;
    background-image:url(../../../assets/task/1.png)
}
.evalContent:nth-child(n+2){
    margin-top:1rem;
}
#myEvaluate .evalContent{
    background-color:white;
    padding:0.5rem;
    height:5rem;
    font-size:0.6rem;
    color:#8b8b8b;
    display:flex;
}
#myEvaluate .evalContent .userImg{
    height:6vh;
    border-radius:50%;
    margin-right:0.25rem;
}
#myEvaluate .evalContent > p{
    width:12%;
    font-size:0.8rem;
}
#myEvaluate .evalContent > div{
    width:80%;
}
#myEvaluate .evalContent > div .evalConName{
    font-size:0.8rem;
    display:flex;
    justify-content:space-between;
}
#myEvaluate .evalConStar{
    width:30%;
    display:flex;
    justify-content:space-between;
}
#myEvaluate .evalConStar img{
    width:0.75rem;
    height:0.75rem;
}
#myEvaluate .evalConSec{
    display:flex;
    font-size:0.8rem;
    color:black;
    height:4vh;
    margin-top:0.25rem;

}
#myEvaluate .evalConTime{
    display:flex;
    justify-content:space-between;
    margin-top:0.25rem;
}
#myEvaluate .evalConSec img{
    width:0.4rem;
    height:0.8rem;
    margin-top:0.5rem;
}
</style>
